<template>
  <!-- 首页主体区域组件 -->
  <!-- 顶部轮播图区域 -->
  <div class="home-main">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 轮播图区域 -->
      <van-swipe :autoplay="3000" lazy-render indicator-color="#666">
        <van-swipe-item v-for="(item, index) in swipeData" :key="index">
          <img :src="item.img">
        </van-swipe-item>
      </van-swipe>

      <!-- 菜单列表 -->
      <van-grid icon-size="30">
        <van-grid-item
          v-for="(item, index) in menusData"
          :key="index"
          :icon="item.img"
          :text="item.info[0].value"
        />
      </van-grid>

      <!-- 公告栏区域 -->
      <van-notice-bar left-icon="fire-o" :scrollable="false" mode="closeable">
        <span>热点资讯公告：</span>
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item, index) in newsData" :key="index">
            {{ item.chiild[0].val }}
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>

      <!-- 商品列表区域 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="initProductList"
      >
        <product-list :product-list-data="productListData" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
// ------------------------------------------ 导入模块 -------------------------------------------------
// 导入 vue3 的 API
import { ref, computed } from 'vue'

// 导入请求模块
// 1. getDefaultData：获取首页默认数据
import { getDefaultData } from '@/api/home_api'
// 2. getProductList：获取商品列表
import { getProductList } from '@/api/product_list_api'

// 导入封装的组件
import ProductList from '@/components/ProductList.vue' // 商品列表

// 导入 vant 组件，按需引入
import {
  PullRefresh as VanPullRefresh,
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
  Grid as VanGrid,
  GridItem as VanGridItem,
  NoticeBar as VanNoticeBar,
  List as VanList
} from 'vant'

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// ------------------------------------------- 声明数据 -------------------------------------------
const homeData = ref({}) // 首页的数据
const productListData = ref([]) // 商品列表的数据
let page = 2 // 分页查询获取商品列表的页数
const limit = 4 // 分页查询获取商品列表每页的商品数
const loading = ref(false) // 上拉加载时候的状态
const finished = ref(false) // 商品列表数据加载完毕的状态
const refreshing = ref(false) // 页面下拉刷新的一个状态

// ---------------------------------------- 封装请求数据函数 --------------------------------------------
// 1、封装请求首页数据的函数
const initHomeData = async () => {
  const data = await getDefaultData() // 发送请求

  // 如果请求失败，提示并直接返回
  const requestResult = judgeRequest(data.status, '首页数据请求失败！')

  // 如果请求成功，获取请求到的数据
  if (requestResult) {
    homeData.value = data.data
  }
}

// 2、封装请求商品列表的函数
const initProductList = async () => {
  // 发送请求
  const data = await getProductList({
    page,
    limit
  })

  // 判断是否请求成功
  const requestResult = judgeRequest(data.status, '商品列表数据请求失败！')

  // 如果请求成功，获取请求到的数据
  if (requestResult) {
    // 请求到的商品列表数据是根据分页查询到的新数据，需要添加到 productListData 中，并不是重新赋值
    productListData.value.push(...data.data)

    // 将本次加载状态变为完成，即让 loading 变为 false
    loading.value = false

    // 判断数据是否全部加载完
    if (data.data.length < limit) {
      // 如果再次请求的数据小于设置请求的条数的话，就直接返回，并将上拉加载设为完成
      finished.value = true
      return
    }
    page++ // 请求完毕后让页数 +1
  }
}

// 3、下拉刷新的函数
const onRefresh = async () => {
  // 1.清空数据
  homeData.value = {}
  productListData.value = []

  // 2. 请求商品列表页码还原
  page = 2

  // 3. 触底上拉刷新的状态还原
  loading.value = false
  finished.value = false

  // 4. 重新发送请求
  await initHomeData()
  await initProductList()

  // 5. 关闭下拉刷新状态
  refreshing.value = false
}

// ------------------------------------------- 函数调用 -----------------------------------------------
initHomeData() // 调用请求首页数据的函数

// ---------------------------------- 通过计算属性保存需要使用的数据 ------------------------------------
// 1. 轮播图数据
const swipeData = computed(() => homeData.value.swiperBg?.default.imgList.list)
// 2. 菜单列表数据
const menusData = computed(() => homeData.value.menus?.default.imgList.list)
// 3. 公告栏列表数据
const newsData = computed(() => homeData.value.news?.default.newList.list)
</script>

<style lang="scss" scoped>
// 首页主体区域组件样式
.home-main {
  // 轮播图样式
  .van-swipe {
    .van-swipe-item {
      height: 170px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 公告区域样式
  :deep(.van-notice-bar__content) {
    display: flex;
    align-items: center;
    .notice-swipe {
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
